<template>
  <div>
    <el-row class="header">
      <el-col :span="21" class="bg-purple-con">
        <div>
          <i
            :class="[ isCollapse ? 'el-icon-s-unfold':'el-icon-s-fold']"
            style="cursor:pointer;"
            @click="radioChange"
          ></i>
        </div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/operatingCenter' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-if="curent">{{curent.name}}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-col :span="3" style="padding:0">
        <div class="bg-purple-right">
          <img class="image" :src="imageaup" alt="">
          <div>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                {{nicName}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                
                <el-dropdown-item command="2">个人中心</el-dropdown-item>
                <el-dropdown-item command="3">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: ["isCollapse", "curent"],
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
          nicName:"",
          imageaup:"",
      
    };
  },
  computed: {},
  created() {
    this.nickname();
  },
  watch: {},
  methods: {
    nickname(){
      let name = localStorage.getItem("name")
      this.nicName = name.replace(/\"/g,"")

      let imagea = localStorage.getItem("imagea")
      this.imageaup = 'http://px.0123china.cn'+imagea
    },
    handleCommand(command) {
      if (command == "3") {
        this.$confirm("退出登录，是否继续？",'提示',{
          type: 'warning'
        }).then(_ => {
            localStorage.clear();
            this.$router.push("/login");
            this.$message("退出成功");
          })
          .catch(_ => {});
      } else if (command == "2") {
        this.$router.push("/personal");
      } else {
        this.$router.push("/product/list");
      }
    },
    radioChange() {
      this.$emit("radioChanges");
    }
  }
};
</script>

<style lang="less" scope>
.bg-purple-right{
  width: 144px;
}
.el-icon-arrow-right{
  align-items: center;
}
.image{
  width: 40px !important;
  height: 40px !important;
  border-radius: 100%;
}
.header {
  .bg-purple-con {
    display: flex;
    align-items: center;
    height: 60px;
    line-height: 60px;
    .el-breadcrumb {
      padding-left: 10px;
    }
  }
  .bg-purple-right {
    height: 60px;
    display: flex;
    align-items: center;
    cursor: pointer;
    opacity: 0.7;
    justify-content: center;
    span {
      margin-left: 10px;
    }
  }
  .bg-purple-right:hover {
    opacity: 1;
  }
}

</style>